<template>
    <transition>
        <el-dialog v-model="showFlag" append-to-body @open="handleOpen" @close="handleClose" width="80%">
            <div class="Breadcrumb">
                <el-breadcrumb separator="/" class="biaoqian">
                    <el-breadcrumb-item :to="{ path: '/registrarInterface' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>教学基础信息管理</el-breadcrumb-item>
                    <el-breadcrumb-item>人才培养方案管理</el-breadcrumb-item>
                </el-breadcrumb>
                <el-divider></el-divider>
            </div>
            <div class="showUnTicketInfo">
                <div class="box">
                    <el-form :model="queryForm" size="middle" :inline="true" style="padding-left: 20px">
                        <el-form-item label="课程类别">
                            <el-select v-model="queryForm.category" placeholder="课程类别" clearable style="width: 240px">
                                <el-option v-for="e in categoty" :key="e" :label="e.label" :value="e.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选课方式">
                            <el-select v-model="queryForm.selectionMethod" placeholder="选课方式" clearable
                                style="width: 240px">
                                <el-option v-for="e in selectionMethod" :key="e" :label="e.label" :value="e.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="开课学期">
                            <el-select v-model="queryForm.semester" placeholder="开课学期" clearable style="width: 240px">
                                <el-option v-for="e in semester" :key="e" :label="e.name" :value="e.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="考核方式">
                            <el-select v-model="queryForm.assessmentMethod" placeholder="考核方式" clearable
                                style="width: 240px">
                                <el-option v-for="e in examMethod" :key="e" :label="e.label" :value="e.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-row :gutter="10" class="mb8">
                                <el-col :span="1.5">
                                    <el-button @click="handleSearch" type="primary" :icon="Search"
                                        size="mini">搜索</el-button>
                                </el-col>
                                <el-col :span="1.5">
                                    <el-button @click="handleReset" :icon="Refresh" size="mini">重置</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>
                    <hr style="margin-bottom: 10px">
                    <el-form :model="courseForm" size="middle" :inline="true" style="padding-left: 20px">
                        <el-form-item label="课程">
                            <el-select v-model="courseForm.courseId" placeholder="课程" clearable style="width: 240px">
                                <el-option v-for="e in courses" :key="e" :label="e.name" :value="e.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-row :gutter="10" class="mb8">
                            <el-col :span="1.5">
                                <el-button type="primary" :icon="Plus" size="mini" @click="handleAdd">添加</el-button>
                            </el-col>
                        </el-row>
                    </el-form>

                </div>
                <div class="box-content">
                    <el-table :data="dataList" height="450" style="width: 100%">
                        <el-table-column label="课程名称" :show-overflow-tooltip="true" prop="name" align="center" />
                        <el-table-column label="开课学期" :show-overflow-tooltip="true" prop="semester" align="center" />
                        <el-table-column label="学分" :show-overflow-tooltip="true" prop="credits" align="center" />
                        <el-table-column label="考核方式" :show-overflow-tooltip="true" prop="assessmentMethod"
                            align="center" />
                        <el-table-column label="上课周次" :show-overflow-tooltip="true" prop="weeks" align="center" />
                        <el-table-column label="总学时" :show-overflow-tooltip="true" prop="totalHours" align="center" />
                        <el-table-column label="课程类别" :show-overflow-tooltip="true" prop="category" align="center" />
                        <el-table-column label="选课方式" :show-overflow-tooltip="true" prop="selectionMethod"
                            align="center" />
                        <el-table-column label="操作" width="100px" align="center">
                            <template #default="scope">
                                <el-popconfirm title="确定删除吗" confirm-button-text="确定" cancel-button-text="取消"
                                    icon="InfoFilled" @confirm="handleDelete(scope.row)" hide-after="0">
                                    <template #reference>
                                        <el-button :icon="DeleteIcon" size="mini"
                                            style="width: 1px; height: 1px; "></el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination layout="prev, pager, next" :total=pageTotal :page-size="pageSize"
                            v-model:current-page="curPage" />
                    </div>
                </div>
            </div>
        </el-dialog>
    </transition>
</template>

<script setup>
import api from '@/api/api';
import { computed, onMounted, ref, watch } from 'vue';
import { Delete, Edit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';

const props = defineProps({
    showDialog: {
        type: Boolean
    },
    planId: {
        default: ''
    }
})
const emit = defineEmits(['dialogClosed'])

const dataList = ref([])
const curPage = ref(1)
const pageSize = ref(7)
const pageTotal = ref(0)
const showFlag = ref(false)
const queryForm = ref({
    'category': '',
    'semester': '',
    'selectionMethod': '',
    'assessmentMethod': ''
})
const courseForm = ref({
    'courseId': ''
})
const examMethod = [
    { value: '0', label: '考试' },
    { value: '1', label: '考查' },
    { value: '2', label: '其他' },
]
let semester = [
    // id, name
]
let courses = [
    // id, name
]
const selectionMethod = [
    { value: '0', label: '必修' },
    { value: '1', label: '可选' },
    { value: '2', label: '通选' },
    { value: '3', label: '其他' },
]
const categoty = [
    { value: '0', label: '通识必修' },
    { value: '1', label: '通识选修' },
    { value: '2', label: '专业基础' },
    { value: '3', label: '专业核心' },
    { value: '4', label: '专业选修' },
    { value: '5', label: '实践教学' },
    { value: '6', label: '其他' },
]

const getData = () => {
    api.training_program.course_page(props.planId, curPage.value, pageSize.value,
        queryForm.value.category, queryForm.value.semester, queryForm.value.selectionMethod, queryForm.value.assessmentMethod
    )
        .then((res) => {
            dataList.value = res.data.data.records
            pageTotal.value = res.data.data.total
        })
        .catch((err) => {
            console.log(err)
        })
}
const handleOpen = () => {
    getData()
}
const handleClose = () => {
    dataList.value = ''
    showFlag.value = false
    emit('dialogClosed')
}
const handleSearch = () => {
    getData()
}
const handleReset = () => {
    queryForm.value.category = ''
    queryForm.value.semester = ''
    queryForm.value.selectionMethod = ''
    queryForm.value.assessmentMethod = ''
    getData()
}
const handleAdd = () => {
    api.training_program.course_add(props.planId, courseForm.value.courseId).then((res) => {
        ElMessage({
            message: '添加成功',
            type: 'success'
        })
        getData()
    }).catch((err) => {
        console.log(err)
    })
}
const handleDelete = (row) => {
    api.training_program.course_del(props.planId, row.id).then(() => {
        ElMessage({
            message: '删除成功',
            type: 'success'
        })
        getData()
    }).catch((err) => {
        console.log(err)
    })
}

watch(() => props.showDialog, (newValue, oldValue) => {
    showFlag.value = props.showDialog
})
watch(() => curPage.value, (newValue, oldValue) => {
    getData()
})
onMounted(() => {
    api.semester.get_all().then((res) => {
        semester = res.data.data
    })
    api.course.get_all().then((res) => {
        courses = res.data.data
    })
})
const DeleteIcon = computed(() => {
    return Delete
})

</script>

<style></style>